<template>
  <view class="container">
    <!-- 顶部背景图 -->
    <view class="header-background">
      <swiper 
        class="background-swiper" 
        indicator-dots 
        autoplay 
        interval="5000" 
        duration="1000"
        circular
        v-if="shopImages.length > 0"
      >
        <swiper-item v-for="(img, index) in shopImages" :key="index">
          <image 
            :src="getShopImage(img)" 
            class="background-image" 
            mode="aspectFill"
          ></image>
        </swiper-item>
      </swiper>
      <image 
        v-else
        :src="getShopImage(shopInfo.img)" 
        class="background-image" 
        mode="aspectFill"
      ></image>
      <!-- 返回按钮 -->
      <view class="back-button" @click="goBack">
        <uni-icons type="left" color="#fff" size="20"></uni-icons>
      </view>
    </view>
    
    <!-- 悬浮卡片 -->
    <view class="floating-card">
      <view class="card-content">
        <!-- 左侧信息区域 -->
        <view class="info-section">
          <view class="shop-basic-info">
            <text class="shop-title">{{ shopInfo.title || '店铺名称' }}</text>
            <view class="shop-tags" v-if="shopInfo.label">
              <text class="label">{{ shopInfo.label }}</text>
            </view>
          </view>
          
          <view class="shop-stats">
            <text class="stat-item" style="color: #ff8d1a;">
              评分: {{ shopInfo.score !== undefined ? shopInfo.score : '暂无' }}
            </text>
            <text class="stat-item">
              月售: {{ shopInfo.quantity !== undefined ? shopInfo.quantity : 0 }}
            </text>
            <text :class="getBusinessStatusClass(shopInfo)" v-if="getBusinessStatus(shopInfo) !== null">
              {{ getBusinessStatus(shopInfo) ? '营业中' : '已打烊' }}
            </text>
          </view>
          <view class="shop-notice" v-if="shopInfo.notice">
            <text class="notice-text">{{ shopInfo.notice }}</text>
          </view>
          
          <view class="shop-address">
            <text class="address-text">{{ shopAddress || shopInfo.address || '暂无地址信息' }}</text>
          </view>
        </view>
        
        <!-- 右侧图片和地图按钮 -->
        <view class="image-section">
          <image 
            :src="getShopImage(shopInfo.img)" 
            class="shop-image" 
            mode="aspectFill"
            v-if="(!shopImages || shopImages.length === 0) && shopInfo.img"
          ></image>
          <image 
            :src="getShopImage(shopImages[0])" 
            class="shop-image" 
            mode="aspectFill"
            v-else-if="shopImages && shopImages.length > 0"
          ></image>
          <image 
            :src="defaultImage" 
            class="shop-image" 
            mode="aspectFill"
            v-else
          ></image>
          <view class="map-button" @click="openMap">
            <text class="map-text">地图</text>
            <uni-icons type="arrowright" size="14" color="#666"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 顶部选项卡 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'order' }"
        @click="switchTab('order')"
      >
        点餐
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'shop' }"
        @click="switchTab('shop')"
      >
        店铺
      </view>
    </view>
    
    <!-- 点餐页面内容 -->
    <view v-show="activeTab === 'order'" class="order-content">
      <!-- 先判断所有商品是否为空，为空则显示提示 -->
      <view v-if="!products || products.length === 0" class="empty-product">
        <view class="empty-text">暂无商品</view>
      </view>
      
      <view v-else class="order-main">
        <!-- 左侧分类 -->
        <scroll-view class="category-list" scroll-y>
          <view 
            v-for="(category, index) in productTypes" 
            :key="index"
            class="category-item"
            :class="{ active: activeCategoryIndex === index }"
            @click="switchCategory(index)"
          >
            {{ category.name || category.title || '热销' }}
          </view>
        </scroll-view>
        
        <!-- 右侧商品列表 -->
        <scroll-view class="product-list" scroll-y>
          <view 
            v-for="(product, index) in filteredProducts" 
            :key="index"
            class="product-item"
            @click="goToProductDetail(product)"
          >
            <image 
              :src="getShopImage(product.img)" 
              class="product-image" 
              mode="aspectFill"
            ></image>
            <view class="product-info">
              <view class="product-name">{{ product.title || product.name || '商品名称' }}</view>
              <view class="product-sales">月售{{ product.quantity || product.sales || product.month_sales || 0 }}份</view>
              <view class="product-price-add">
                <view class="product-price">¥{{ product.price || product.money || 0 }}</view>
                <uni-icons type="plus-filled" size="24" color="#FFD000"></uni-icons>
              </view>
            </view>
          </view>
          
          <!-- 当没有商品时显示提示 -->
          <view v-if="filteredProducts && filteredProducts.length === 0" class="no-products">
            该分类下暂无商品
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 店铺页面内容 -->
    <view v-show="activeTab === 'shop'" class="shop-content">
      <!-- 商家信息 -->
      <view class="merchant-info">
        <view class="merchant-row">
          <text class="shop-name">{{ shopInfo.title || '店铺名称' }}</text>
          <view class="phone-icon" @click="callShop">
            <uni-icons type="phone-filled" size="20" color="#43CF7C"></uni-icons>
          </view>
        </view>
        <view class="merchant-row">
            <uni-icons type="location-filled" size="20"></uni-icons>
          <text class="merchant-text">地址: {{ shopAddress || shopInfo.address || '暂无地址信息' }}</text>
            <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="merchant-row">
            <uni-icons type="phone-filled" size="20"></uni-icons>
          <text class="merchant-text">电话: {{ shopInfo.tel || '暂无电话' }}</text>
        </view>
        <view class="merchant-row">
          <view class="rating-container">
            <text class="rating-label">服务评价:</text>
            <view class="stars-container">
              <uni-icons 
                v-for="star in 5" 
                :key="star"
                :type="star <= Math.floor(shopInfo.score) ? 'star-filled' : 'star'" 
                size="16" 
                :color="star <= Math.floor(shopInfo.score) ? '#FFD700' : '#ccc'"
              ></uni-icons>
            </view>
            <text class="score-text">{{ shopInfo.score !== undefined ? shopInfo.score : '暂无评分' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 店铺介绍 -->
      <view class="content-section">
        <view class="section-title">店铺介绍</view>
        <view class="section-content">
          <text>{{ shopInfo.info || shopInfo.notice || '暂无店铺介绍' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
import { foodAPI } from '../../static/indexAPI.js';
import config from "@/static/config.js";
export default {
  data() {
      return {
        shopId: '',
        shopInfo: {},
        defaultImage: config.imgUrl + '/img/icons1.png',
        shopAddress: '', // 通过经纬度解析的地址
        shopImages: [], // 店铺详情图片列表
        activeTab: 'order', // 当前激活的选项卡
        activeCategoryIndex: 0, // 当前激活的商品分类索引
        productTypes: [{name: '热销'}], // 商品分类列表
        products: [] // 商品列表
      };
    },
  
  computed: {
    // 根据选中的分类过滤商品
    filteredProducts() {
      console.log('计算过滤商品:', {
        products: this.products,
        productTypes: this.productTypes,
        activeCategoryIndex: this.activeCategoryIndex
      });
      
      // 如果没有商品，直接返回空数组
      if (!this.products || this.products.length === 0) {
        console.log('没有商品数据');
        return [];
      }
      
      // 如果没有分类或者选中的是第一个分类（默认"热销"分类），返回所有商品
      if (this.productTypes.length === 0 || this.activeCategoryIndex === 0) {
        console.log('返回所有商品');
        return this.products;
      }
      
      // 如果选中的分类超出了分类数组范围，返回所有商品
      if (this.activeCategoryIndex >= this.productTypes.length) {
        console.log('分类索引超出范围，返回所有商品');
        return this.products;
      }
      
      // 获取当前选中分类的ID
      const category = this.productTypes[this.activeCategoryIndex];
      console.log('当前选中分类:', category);
      
      // 如果当前分类没有ID（例如"热销"分类），返回所有商品
      if (category.id === undefined) {
        console.log('分类没有ID，返回所有商品');
        return this.products;
      }
      
      // 根据分类ID过滤商品
      // 注意：foodproducttype_id 是一个逗号分隔的ID列表
      const filtered = this.products.filter(product => {
        if (!product.foodproducttype_id) return false;
        
        // 将逗号分隔的ID字符串转换为数组
        const typeIds = product.foodproducttype_id.toString().split(',').map(id => id.trim());
        return typeIds.includes(category.id.toString());
      });
      
      console.log('过滤后的商品:', filtered);
      return filtered;
    }
  },

  
  onLoad() {
      // 从本地存储获取店铺信息
      console.log('页面加载，尝试从本地存储获取店铺信息');
      try {
        const shop = uni.getStorageSync('currentShop');
        if (shop) {
          console.log('从本地存储获取到店铺信息:', shop);
          this.shopInfo = shop;
          this.shopId = shop.id || '';
          
          // 获取详细店铺信息
          this.fetchShopDetail();
        } else {
          console.log('本地存储中没有找到店铺信息，使用模拟数据');
          this.useMockData();
        }
      } catch (e) {
        console.error('从本地存储获取店铺信息失败:', e);
        this.useMockData();
      }
    },
  
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    // 切换商品分类
    switchCategory(index) {
      this.activeCategoryIndex = index;
    },
    
    async fetchShopDetail() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        });
        
        console.log('开始请求店铺详情，店铺ID:', this.shopId);
        
        const res = await foodAPI.getShopDetail({
          id: this.shopId
        });
        
        // 隐藏加载提示
        uni.hideLoading();
        
        
        const data = res.data || res[1]; // 处理统一封装接口可能返回的数据格式
        
        if (data && data.code === 1) {
          // 保存接口返回的完整数据
          const detailData = data.data;
          
          // 合并从列表页获取的基础信息和详情页获取的详细信息
          this.shopInfo = {
            ...this.shopInfo, // 保留基础信息
            ...detailData      // 用详细信息覆盖
          };
          
          console.log('合并后的店铺信息:', this.shopInfo);
          
          // 处理店铺图片
          if (this.shopInfo.imgs) {
            this.shopImages = this.shopInfo.imgs.split(',').map(img => img.trim()).filter(img => img);
          }
          
          // 处理商品分类 - 使用text字段作为分类名称
          if (this.shopInfo.producttype && Array.isArray(this.shopInfo.producttype) && this.shopInfo.producttype.length > 0) {
            // 将接口返回的text字段映射为name字段以匹配前端代码
            this.productTypes = this.shopInfo.producttype.map(type => ({
              ...type,
              name: type.text || type.name || '未命名分类'
            }));
          } else {
            // 如果没有分类数据，保持默认的"热销"分类
            this.productTypes = [{name: '热销'}];
          }
          
          // 处理商品列表
          if (this.shopInfo.product && Array.isArray(this.shopInfo.product)) {
            this.products = this.shopInfo.product;
          } else {
            this.products = [];
          }
          
          // 通过经纬度获取地址信息
          if (this.shopInfo.latitude && this.shopInfo.longitude) {
            // 使用 nextTick 确保数据已经更新到视图后再获取地址
            this.$nextTick(() => {
              this.getAddressFromLatLng(this.shopInfo.latitude, this.shopInfo.longitude);
            });
          }
          
        } else {
          // 即使接口请求不成功，也保留从列表页传来的基本信息
          // 尝试解析地址
          if (this.shopInfo.latitude && this.shopInfo.longitude) {
            this.$nextTick(() => {
              this.getAddressFromLatLng(this.shopInfo.latitude, this.shopInfo.longitude);
            });
          }
        }
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading();
        console.error('请求异常:', error);
        // 出错时保留从列表页传来的基本信息
        // 尝试解析地址
        if (this.shopInfo.latitude && this.shopInfo.longitude) {
          this.$nextTick(() => {
            this.getAddressFromLatLng(this.shopInfo.latitude, this.shopInfo.longitude);
          });
        }
      }
    },
    
    // 通过经纬度获取地址信息
    getAddressFromLatLng(latitude, longitude) {
      // 使用腾讯地图API进行逆地址解析
      const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=6JVBZ-XDGW5-2Y5IN-INTVS-WBNOH-44FVL&get_poi=0`;
      
      uni.request({
        url: url,
        success: (res) => {
          if (res.data.status === 0 && res.data.result) {
            // 成功获取地址信息
            this.shopAddress = res.data.result.address || res.data.result.formatted_addresses.recommend || '';
          } else {
            // 如果解析失败，保留原始地址
            this.shopAddress = this.shopInfo.address || '';
          }
        },
        fail: (err) => {
          console.error('腾讯地图逆地址解析失败:', err);
          // 请求失败时保留原始地址
          this.shopAddress = this.shopInfo.address || '';
        }
      });
    },
    
    // 获取正确的图片URL
    getShopImage(imgUrl) {
      if (!imgUrl) return this.defaultImage;
      
      // 修复重复前缀问题 - 如果有重复的前缀，只保留一个
      if (imgUrl.startsWith('https://yikatong.kuxia.tophttp://')) {
        return 'http://' + imgUrl.substring(33); // 33是"https://yikatong.kuxia.top"的长度
      }
      
      if (imgUrl.startsWith('https://yikatong.kuxia.tophttps://')) {
        return 'https://' + imgUrl.substring(34); // 34是"https://yikatong.kuxia.top"的长度+1
      }
      
      // 如果已经是完整URL，直接返回
      if (imgUrl.startsWith('http://') || imgUrl.startsWith('https://')) {
        return imgUrl;
      }
      
      // 如果是相对路径，拼接基础URL
      return config.baseURL + imgUrl;
    },


    // 格式化营业时间显示
    formatBusinessHours() {
      const start = this.shopInfo.starttime || '00:00';
      const end = this.shopInfo.endtime || this.shopInfo.end || '23:59';
      
      // 如果时间包含秒数，去掉秒数部分只显示到分钟
      const formatTime = (time) => {
        if (time && time.length > 5) {
          return time.substring(0, 5);
        }
        return time;
      };
      
      return `${formatTime(start)}-${formatTime(end)}`;
    },
    
    // 拨打电话
    callShop() {
      if (this.shopInfo.tel) {
        uni.makePhoneCall({
          phoneNumber: this.shopInfo.tel,
          success: () => {
            console.log('拨打电话成功');
          },
          fail: (err) => {
            console.error('拨打电话失败:', err);
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            });
          }
        });
      }
    },
    
    useMockData() {
      // 模拟店铺详情数据
      this.shopInfo = {
        id: this.shopId || '1',
        title: '示例店铺',
        img: config.imgUrl + '/img/eat.png',
        score: '4.5',
        quantity: '128',
        money: '35',
        starttime: '08:00',
        end: '22:00',
        reserve: 1,
        label: '新店',
        foodtype_id: 1,
        notice: '本店特色菜系，欢迎品尝',
        address: '河南省新乡市红旗区某某街道123号'
      };
    },
    
    getBusinessStatus(shop) {
      // 获取当前时间
      const now = new Date();
      const currentTime = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds(); // 格式化为HHMMSS
      
      // 获取开店和关店时间
      let startTime = shop.starttime || '00:00:00';
      let endTime = shop.endtime || shop.end || '23:59:59';
      
      // 确保时间格式统一为 HH:MM:SS
      if (startTime.length <= 5) { // 如果是 HH:MM 格式，补充秒数
        startTime += ':00';
      }
      
      if (endTime.length <= 5) { // 如果是 HH:MM 格式，补充秒数
        endTime += ':00';
      }
      
      // 解析开店时间
      const [startHour, startMinute, startSecond] = startTime.split(':').map(Number);
      const start = startHour * 3600 + startMinute * 60 + startSecond;
      
      // 解析关店时间
      const [endHour, endMinute, endSecond] = endTime.split(':').map(Number);
      const end = endHour * 3600 + endMinute * 60 + endSecond;
      
      // 判断是否营业中
      if (startTime === '00:00:00' && endTime === '00:00:00') {
        return null; // 没有营业时间信息
      }
      
      // 处理跨天情况（如营业到凌晨）
      if (end < start) {
        // 跨天营业，如从晚上到凌晨
        return currentTime >= start || currentTime <= end;
      }
      
      // 不跨天的正常情况
      return currentTime >= start && currentTime <= end;
    },
    
    getBusinessStatusClass(shop) {
      const isOpen = this.getBusinessStatus(shop);
      if (isOpen === null) return '';
      return isOpen ? 'business-open' : 'business-closed';
    },
    
    openMap() {
      // 打开地图功能
      if (this.shopInfo.latitude && this.shopInfo.longitude) {
        // 使用经纬度打开地图
        uni.openLocation({
          latitude: parseFloat(this.shopInfo.latitude),
          longitude: parseFloat(this.shopInfo.longitude),
          name: this.shopInfo.title,
          address: this.shopAddress || this.shopInfo.address,
          success: () => {
            console.log('打开地图成功');
          },
          fail: (err) => {
            console.error('打开地图失败:', err);
            uni.showToast({
              title: '打开地图失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '该店铺未设置位置信息',
          icon: 'none'
        });
      }
    },
    
     // 预览图片
    previewImage(index) {
      const urls = this.shopImages.map(img => this.getShopImage(img));
      uni.previewImage({
        current: index,
        urls: urls
      });
    },

    // 跳转到商品详情页面
    goToProductDetail(product) {
      // 通过URL参数传递商品ID
      if (product.id) {
        uni.navigateTo({
          url: `/pages/foodDetail/foodDetail?id=${product.id}`
        });
      } else {
        uni.showToast({
          title: '无法获取商品信息',
          icon: 'none'
        });
      }
    }
    }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: #f5f5f5;
}

.header-background {
  position: relative;
  height: 200px;
}

.background-swiper, .background-image {
  width: 100%;
  height: 100%;
}

.back-button {
  position: absolute;
  top: 40px;
  left: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.floating-card {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.card-content {
  display: flex;
  padding: 15px;
}

.info-section {
  width: 75%;
  padding-right: 10px;
}

.shop-basic-info {
  /* margin-bottom: 8px; */
}

.shop-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
}

.shop-tags {
  /* margin-top: 5px; */
}

.label {
  font-size: 12px;
  color: #f7bd2c;
  background-color: #fff9ef;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 5px;
}

.shop-stats {
  display: flex;
  /* margin-bottom: 6px; */
  align-items: center;
}

.stat-item {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.shop-meta {
  /* margin-bottom: 6px; */
}

.meta-item {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.business-open, .business-closed {
  font-size: 12px;
  color: #43CF7C;
  border: 1px solid #43CF7C;
  background-color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  width: fit-content;
}

.business-closed {
  opacity: 0.6;
  color: #999;
  border-color: #999;
}

.shop-notice {
  display: flex;
  align-items: flex-start;
  padding: 5px 0px;
  border-radius: 3px;
  margin-bottom: 6px;
}

.notice-text {
  font-size: 12px;
  margin-left: 5px;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-address {
  /* margin-top: 5px; */
}

.address-text {
  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-section {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-image {
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.map-button, .contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3px 0;
  border: 1px solid #eee;
  border-radius: 3px;
  background-color: #f9f9f9;
  margin-bottom: 5px;
}

.map-text, .contact-text {
  font-size: 12px;
  color: #666;
  margin-right: 3px;
}

/* 选项卡样式 */
.tab-container {
  display: flex;
  margin-top: 50px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.tab-item {
  width: 20%;
  /* flex: 1; */
  text-align: center;
  padding: 15px 0;
  font-size: 16px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #666; /* 保持原颜色 */
  font-weight: bold; /* 加粗字体 */
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px; /* 固定下划线宽度 */
  height: 2px;
  background-color: #ff8d1a;
}

/* 点餐内容样式 */
.order-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-top: 10px;
}

.order-main {
  display: flex;
  flex: 1;
  height: calc(100vh - 300px);
}

.category-list {
  width: 30%;
  background-color: #f5f5f5;
  height: 100vh;
}

.category-item {
  padding: 15px 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.category-item.active {
  background-color: #fff;
  color: #666; /* 保持原颜色 */
  font-weight: bold; /* 加粗字体 */
}

.product-list {
  width: 70%;
  padding: 10px;
  height: 100%;
}

.product-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-description {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.product-sales {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.product-price-add {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 16px;
  color: #ff4d4f;
}

.no-products {
  text-align: center;
  padding: 20px;
  color: #999;
}

.add-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ff8d1a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 店铺内容样式 */
.shop-content {
  background-color: #fff;
  margin-top: 10px;
}

.merchant-info {
  padding: 15px;
  border-bottom: 10px solid #f5f5f5;
}

.merchant-row {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

.shop-name {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
}

.phone-icon {
  padding: 5px;
}

.merchant-text {
  font-size: 14px;
  color: #666;
}

.rating-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.rating-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.stars-container {
  display: flex;
  margin-right: 10px;
}

.score-text {
  font-size: 14px;
  color: #ff8d1a;
}

.content-section {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.section-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.shop-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shop-detail-image {
  width: calc(33.33% - 10px);
  height: 100px;
  border-radius: 5px;
}
</style>